<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<p>Below, the two words "OK" and "WIN" should be seen on two separate lines. Letter spacing should
    be large. The line with "OK" should be southwest of "WIN". Between the two words you should see
    a hotpink rectangle.</p>
<div id="outer" style="position:relative; -webkit-columns:3; -webkit-column-gap:0; font-size:16px; width:12em; column-fill:auto; height:4.5em; line-height:2em; text-align:center;">
    <br>
    <div style="-webkit-columns:4; -webkit-column-gap:0;">
        <div data-offset-x="0" data-offset-y="32">O</div>
        <div data-offset-x="16" data-offset-y="32">K</div>
        <div data-offset-x="64" data-offset-y="0" style="font-size:1.8em; line-height:2em; background:hotpink;">
            <br>
        </div>
        <div data-offset-x="80" data-offset-y="0">W</div>
        <div data-offset-x="96" data-offset-y="0">I</div>
        <div data-offset-x="112" data-offset-y="0">N</div>
    </div>
</div>
<script>
    checkLayout("#outer");
</script>
